<template>
  <div class="turnoverbox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">周转箱管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')" v-if="USER.auth.indexOf('base_turnoverbox_add')!==-1">新增周转箱</el-button>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="80">
          <template slot-scope="s">
            <el-button type="info" size="mini" v-if="USER.auth.indexOf('base_turnoverbox_enable')!==-1 && s.row.sfjh !== 1" @click="tableActive(s.row)"><i class="fa fa-unlock" aria-hidden="true"></i></el-button>
            <div v-else>
              <el-button type="success" icon="edit" size="mini" @click="tableEdit(s.row)" v-if="USER.auth.indexOf('base_turnoverbox_edit')!==-1"></el-button>
              <el-tooltip placement="top">
                <div slot="content">更多可用操作</div>
                <el-popover
                  popper-class="demo-table-expand"
                  placement="right"
                  title="更多可用操作"
                  trigger="click">
                  <slot name="content">
                    <el-button type="info" size="mini" @click="dialogTjxsOpen(s.row)" v-if="USER.auth.indexOf('base_turnoverbox_add_boxnumber')!==-1"><i class="fa fa-plus" aria-hidden="true"></i> 箱数</el-button>
                    <el-button type="warning" size="mini" @click="dialogKjxsOpen(s.row)" v-if="USER.auth.indexOf('base_turnoverbox_lessen_boxnumber')!==-1"><i class="fa fa-minus" aria-hidden="true"></i> 箱数</el-button>
                    <el-button type="danger" size="mini" @click="tableDelete(s.row)" v-if="USER.auth.indexOf('base_turnoverbox_disable')!==-1"><i class="fa fa-lock" aria-hidden="true"></i> 禁用</el-button>
                  </slot>
                  <el-button slot="reference" type="info" icon="more" :plain="true" size="mini" class="__reference"></el-button>
                </el-popover>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-row>
          <el-col :xs="24" :lg="{span: 4, offset: 0}">
            <el-form-item label="箱型" prop="xx">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_xx"
                        placeholder="箱型" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="激活状态" prop="ms">
              <el-select v-model="autoVue_table_sfjh"
                         placeholder="是否激活">
                <el-option
                  label="全部"
                  value=""></el-option>
                <el-option
                  label="未激活"
                  value="0"></el-option>
                <el-option
                  label="已激活"
                  value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}周转箱</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="xx" label="箱型">
              <el-input
                :disabled="dialog.title==='修改'"
                type="text"
                ref="xx"
                @keyup.enter.native="getFocus(1)"
                v-model="formDialog.xx"
                placeholder="箱型"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="xzl" label="箱重量">
              <el-input
                :disabled="dialog.title==='修改'"
                type="text"
                @keyup.enter.native="getFocus(2)"
                v-model="formDialog.xzl"
                placeholder="箱重量"></el-input>
              <!--
              <el-input-number
                :disabled="dialog.title==='修改'"
                :min="1"
                type="text"
                v-model="formDialog.xzl"
                placeholder="箱重量"></el-input-number>
                -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="k" label="宽">
              <el-input
                :disabled="dialog.title==='修改'"
                :min="1"
                type="text"
                @keyup.enter.native="getFocus(3)"
                v-model="formDialog.k"
                placeholder="宽"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="g" label="高">
              <el-input
                :disabled="dialog.title==='修改'"
                :min="1"
                type="text"
                @keyup.enter.native="getFocus(4)"
                v-model="formDialog.g"
                placeholder="高"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="c" label="长">
              <el-input
                :disabled="dialog.title==='修改'"
                :min="1"
                type="text"
                @keyup.enter.native="getFocus(5)"
                v-model="formDialog.c"
                placeholder="长"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="zdzl" label="最大重量">
              <el-input
                :disabled="dialog.title==='修改'"
                type="text"
                @keyup.enter.native="getFocus(6)"
                v-model="formDialog.zdzl"
                placeholder="最大重量"></el-input>
              <!--
              <el-input-number
                :disabled="dialog.title==='修改'"
                :min="1"
                type="text"
                v-model="formDialog.xzl"
                placeholder="箱重量"></el-input-number>
                -->
            </el-form-item>
            <!--
            <el-form-item prop="zdzl" label="最大重量">
              <el-input-number
                :disabled="dialog.title==='修改'"
                :min="1"
                type="text"
                v-model="formDialog.zdzl"
                placeholder="最大重量"></el-input-number>
            </el-form-item>
            -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="fdrj" label="浮动容积上限">
              <el-input
                type="text"
                ref="fdrj"
                @keyup.enter.native="getFocus(7)"
                :min="0"
                v-model="formDialog.fdrj"
                placeholder="浮动容积上限"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="zzl" label="装载率(0.01-1)">
              <el-input
                type="text"
                @keyup.enter.native="getSaveFocus"
                v-model="formDialog.zzl"
                placeholder="装载率"></el-input>
            </el-form-item>
            <!--<el-form-item prop="zzl" label="装载率">-->
              <!--<el-input-number-->
                <!--type="text"-->
                <!--:min="0.01"-->
                <!--:max="1"-->
                <!--:step="0.01"-->
                <!--v-model="formDialog.zzl"-->
                <!--placeholder="装载率"></el-input-number>-->
            <!--</el-form-item>-->
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogTjxs" :close="dialogTjxsInit">
      <p slot="title">{{dialogTjxs.title}}箱数</p>
      <s-form :form="formDialogTjxs" ref="formDialogTjxs">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="sl" label="箱数">
              <el-input
                type="text"
                v-model="formDialogTjxs.sl"
                placeholder="箱数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="xgyy" label="原因">
              <el-input
                type="text"
                v-model="formDialogTjxs.xgyy"
                placeholder="原因"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogTjxsSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogKjxs" :close="dialogKjxsInit">
      <p slot="title">{{dialogKjxs.title}}箱数</p>
      <s-form :form="formDialogKjxs" ref="formDialogKjxs">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="sl" label="箱数">
              <el-input
                type="text"
                v-model="formDialogKjxs.sl"
                placeholder="箱数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="xgyy" label="原因">
              <el-input
                type="text"
                v-model="formDialogKjxs.xgyy"
                placeholder="原因"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogKjxsSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue, AutoPromise} from '~/plugins/Tools';
  function __form () {
    return {
      sshzid: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      xx: { value: '', rule: [ 'vNull' ], cRemarks: '箱型' },
      xzl: { value: '', rule: [ 'vNull', 'vNumber', 'vNumberZ' ], cRemarks: '箱重量' },
      sfjh:
        { value: '1',
          rule: [],
          cRemarks: '是否激活 0未激活 1已激活 激活状态' },
      c: { value: '0', rule: [ 'vNull', 'vNumber', 'vNumberZ' ], cRemarks: '长' },
      k: { value: '0', rule: [ 'vNull', 'vNumber', 'vNumberZ' ], cRemarks: '宽' },
      g: { value: '0', rule: [ 'vNull', 'vNumber', 'vNumberZ' ], cRemarks: '宽' },
      zdtj: { value: '0', rule: [], cRemarks: '' },
      zdzl: { value: '0', rule: [ 'vNull', 'vNumber', 'vNumberZ' ], cRemarks: '最大重量' },
      fdrj: { value: '0', rule: [ 'vNull', 'vNumber', 'vNumberZ' ], cRemarks: '浮动容积上限' },
      zzl: { value: '0', rule: [ 'vNull', 'vNumber', 'vNumberZ' ], cRemarks: '装载率' },
      xs: { value: '', rule: [ 'vNull', 'vNumber' ], cRemarks: '' },
      sl:
        { value: '0',
          rule: [ 'vNull', 'vNumber', 'vNumberZ' ],
          cRemarks: '' },
      xgyy: { value: '', rule: [ 'vNull' ], cRemarks: '' },
    };
  }
  function __formTjxs () {
    return {
      sl: { value: '', rule: [ 'vNull', 'vNumber', 'vNumberZ' ], cRemarks: '' },
      xgyy: { value: '到货', rule: [ '' ], cRemarks: '' },
    };
  }
  function __formKjxs () {
    return {
      sl: { value: '', rule: [ 'vNull', 'vNumber', 'vNumberZ' ], cRemarks: '' },
      xgyy: { value: '消耗', rule: [ '' ], cRemarks: '' },
    };
  }
  export default AutoVue({
    name: 'base_turnoverbox-FEcarWms',
    head: {
      'title': '周转箱管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 周转箱 查看周转箱信息' },
      ],
    },
    store: ['DICTIONARY_turnoverbox', 'TURNOVERBOX', 'USER'],
    data: {
      table: {
        column: [ { label: '箱型',
          prop: 'xx',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '长',
          prop: 'c',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '宽',
          prop: 'k',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '高',
          prop: 'g',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '箱数',
          prop: 'xs',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '激活状态',
          prop: 'show_sfjh',
          minWidth: '0px',
          elTag: {
            filterType: function (value) {
              return value === '未激活' ? 'danger' : 'success';
            },
          },
          cRemarks: '',
          search: true },
        { label: '最大体积',
          prop: 'zdtj',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '箱重量',
          prop: 'xzl',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '最大重量',
          prop: 'zdzl',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '浮动容积上限',
          prop: 'fdrj',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '装载率',
          prop: 'zzl',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        ],
        url: '/wmsturnoverbox/list',
        key: 'id',
        tableColumn: 6,
        muti: false,
      },
      formDialog: __form(),
      formDialogTjxs: __formTjxs(),
      formDialogKjxs: __formKjxs(),
      dialog: {
        title: '新增',
        row: {},
      },
      dialogTjxs: {
        title: '添加',
        row: {},
      },
      dialogKjxs: {
        title: '扣减',
        row: {},
      },
    },
    transition: 'slide-fade',
    methods: {
      getFocus (len) {
        const DOM = event.path[6][len];
        DOM.focus();
      },
      getSaveFocus () {
        this.dialogSave();
      },
      tableEdit (row) {
        this.dialogOpen('PUT', row);
      },
      tableDelete (row) {
        this.$confirm('您将删除该周转箱。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            let ids = [];
            for (let item of this.table.multipleSelection) {
              ids.push(item.id);
            }
            try {
              await this.post('/wmsturnoverbox/delete', {
                ids: ids.length === 0 ? [row.id] : ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tableActive (row) {
        this.$confirm('您将激活该周转箱。', '确认激活？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            let ids = [];
            for (let item of this.table.multipleSelection) {
              ids.push(item.id);
            }
            try {
              await this.post('/wmsturnoverbox/yjh', {
                ids: ids.length === 0 ? [row.id] : ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },

      dialogInit () {
        this.dialog.row = {};
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (type, row) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        await AutoPromise([
          async () => {
            if (!this.DICTIONARY_turnoverbox) {
              await this.USE('DICTIONARY_turnoverbox');
            }
          },
        ]);
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          this.formDialog.id = 0;
          setTimeout(() => {
            this.$refs.xx.$el.children[0].focus();
          });
          break;
        case 'PUT':
          this.dialog.title = '修改';
          this.dialog.row = row;
          this.formDialog = {
            ...this.formDialog,
            ...this.ObjectClone(__form(), row),
          };
          setTimeout(() => {
            this.$refs.fdrj.$el.children[0].focus();
          });
          this.dialog.row = row;
          break;
        }
        this.dialog.visible = true;
        // this.dialog.title = '新增';
        // this.dialog.visible = true;
      },
      dialogSave () {
        this.$confirm('您将保存周装箱信息。', '确认保存？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            if (this.dialog.title === '新增') {
              this.VALIDATE('formDialog', async option => {
                let rj = (this.formDialog.c * this.formDialog.k * this.formDialog.g) - (this.formDialog.c * this.formDialog.k * this.formDialog.g * this.formDialog.zzl);
                let kyrj = rj.toFixed(4);
                if (parseFloat(this.formDialog.zzl) > 1 || parseFloat(this.formDialog.zzl) < 0.01) {
                  return this.$alert('装载率 介于0.01和1之间', '提示');
                }
                if (parseFloat(this.formDialog.fdrj) > kyrj) {
                  return this.$alert('浮动容积上限 不能大于 可用容积:' + '\t' + kyrj, '提示');
                }
                try {
                  await this.post('/wmsturnoverbox/add', option);
                  this.tableWatch('table');
                  this.dialogInit();
                  this.dialog.visible = false;
                } catch (err) {
                  console.log(err);
                }
              });
            } else {
              this.VALIDATE('formDialog', async option => {
                let rj = this.formDialog.c * this.formDialog.k * this.formDialog.g * this.formDialog.zzl;
                let kyrj = rj.toFixed(4);
                if (parseFloat(this.formDialog.zzl) > 1 || parseFloat(this.formDialog.zzl) < 0.01) {
                  return this.$alert('装载率 介于0.01和1之间', '提示');
                }
                if (parseFloat(this.formDialog.fdrj) > kyrj) {
                  return this.$alert('浮动容积上限 不能大于 可用容积:' + '\t' + kyrj, '提示');
                }
                try {
                  option.id = this.dialog.row.id;
                  await this.post('/wmsturnoverbox/edit', option);
                  this.tableWatch('table');
                  this.dialogInit();
                  this.dialog.visible = false;
                } catch (err) {
                  console.log(err);
                }
              });
            }
          })
          .catch(_ => {
          });
      },

      dialogTjxsInit () {
        this.dialogTjxs.row = {};
        this.formDialogTjxs = {
          ...this.formDialogTjxs,
          ...this.ObjectClone(__formTjxs()),
        };
        this.resetFields('formDialogTjxs');
      },
      dialogTjxsOpen (row) {
        this.dialogTjxs.row = row;
        this.dialogTjxs.visible = true;
      },
      dialogTjxsSave () {
        this.VALIDATE('formDialogTjxs', async option => {
          try {
            option.id = this.dialogTjxs.row.id;
            await this.post('/wmsturnoverbox/addSl', option);
            this.dialogTjxs.row.xs = parseInt(this.dialogTjxs.row.xs) + parseInt(option.sl) + '';
            this.dialogTjxsInit();
            this.dialogTjxs.visible = false;
          } catch (err) {
            console.log(err);
          }
        });
        // this.dialogTjxs.visible = false;
      },

      dialogKjxsInit () {
        this.dialogKjxs.row = {};
        this.formDialogKjxs = {
          ...this.dialogKjxs,
          ...this.ObjectClone(__formKjxs()),
        };
        this.resetFields('dialogKjxs');
      },
      dialogKjxsOpen (row) {
        this.dialogKjxs.row = row;
        this.dialogKjxs.visible = true;
      },
      dialogKjxsSave () {
        this.VALIDATE('formDialogKjxs', async option => {
          try {
            option.id = this.dialogKjxs.row.id;
            option.ckid = this.dialogKjxs.row.ckid;
            await this.post('/wmsturnoverbox/delSl', option);
            this.dialogKjxs.row.xs = parseInt(this.dialogKjxs.row.xs) - parseInt(option.sl) + '';
            this.dialogKjxsInit();
            this.dialogKjxs.visible = false;
          } catch (err) {
            console.log(err);
          }
        });
        this.dialogTjxs.visible = false;
      },

    },
    mounted: function () {
      this.tableWatch('table');
      console.log(this);
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
  .turnoverbox{
    width: 88vw;
    float: left;
  }
</style>
